<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="front/common/layout">
<head>
<title th:text="${article.articleTitle}"></title>
<link th:href="@{~/front/css/index.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{~/managed/assets/js/jquery.form.js}"></script>
<script th:src="@{~/managed/layer/layer.js}" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" th:href="@{~/managed/layer/skin/default/layer.css}" />
</head>
<body>
	<div class="container" style="padding: 20px" layout:fragment="content">
		<h2 class="nh1">
			<span>您现在的位置是：<a th:href="@{/}">网站首页</a>>>技术文章</span><b th:text="${article.articleTitle}"></b>
		</h2>

		<div class="bloglist f_l">
			<section>
				<h2 class="abh1">
					<strong th:text="${article.articleTitle}"></strong>
					<p class="dateview">
						<span><i class="fa fa-calendar"></i>&nbsp;<b th:text="${#dates.format(article.articleCreateTime, 'yyyy-MM-dd')}"></b></span><span><i
							class="fa fa-user"></i> &nbsp;<b th:text="${article.member.memberName}"></b></span>
					</p>
				</h2>

				<article style="font-size: 15px; text-indent: 2em;" id="content" >					
				</article>
			</section>
			<h2 class="nh1"></h2>
			<p class="dateview" style="font-size: 18px;">
				<span><i class="fa fa-tags"></i><b id="tag"></b></span>
			</p>
			<p style="margin-top: 10px; font-size: 18px;">
				<span style="float: left;" th:if="${previousArticle != null}">上一篇:<a th:href="@{/article/{articleId}(articleId=${previousArticle.articleId})}" th:text="${previousArticle.articleTitle}"></a></span> 
				<span style="float: right;" th:if="${nextArticle != null}">下一篇:<a th:href="@{/article/{articleId}(articleId=${nextArticle.articleId})}" th:text="${nextArticle.articleTitle}"></a></span>
			</p>
			<!-- <h2 class="nh1"></h2> -->
			<!-- <div class="comment_class">
				<div id="comment_title" class="panel_head">
					<span class="see_comment">查看评论</span><a name="comments"></a>
				</div>
				<div id="comment_list">
					<dl class="comment_item comment_topic" id="comment_item_7111112">
						<dt class="comment_head" floor="3">
							<span class="user">暗夜丿使者<span class="ptime">4天前
									20:59发表</span> <a href="#reply"  title="回复"><i class="fa fa-reply"></i></a>
								</span>
						</dt>					
						<dd class="comment_body">感谢分享，学习一下！</dd>
					</dl>					
					<div class="clear"></div>
				</div>
				<div id="comment_form">
					<form th:action="@{/article/comment/{articleId}(articleId=${article.articleId})}" id="commentForm" method="post" style="font-size: 18px;">
						<div class="panel_head">发表评论</div>
						<div>							
							<label >用 户 名：</label>
							<input name="member.memberName" class="input_comment" />
						</div>
						<div>
						    <label>评论内容：</label>
						    <textarea  name="commentContent" style="width: 100%; height: 200px;"></textarea>
						</div>
						<div>								
							<button type="button" onclick="save()" class="input_submit" >提交</button>							
						</div>
					</form>
				</div>
				
			</div> -->
		</div>

		<div class="r_box f_r">
			<div class="tuwen">
				<h3 class="tit">文章分类</h3>
				<ul>
					<li th:each="cate : ${cateList}">
					   <a th:href="@{/article/cate/{cateId}(cateId=${cate.cateId})}"><b th:text="${cate.cateName}"></b></a>
					</li>
				</ul>
			</div>
			<div class="ph">
				<h3 class="tit">点击排行</h3>
				<ul class="rank">
					<li th:each="article : ${articleList}">
					    <a th:href="@{/article/{articleId}(articleId=${article.articleId})}"><b th:text="${article.articleTitle}"></b></a>
					</li>
				</ul>
			</div>
		</div>
		<script th:inline="javascript">
		       var content = [[${article.articleContent}]];
		       $("#content").append(content);
		       var keyword = [[${article.articleKeywords}]];
		       var keywords = keyword.replace(","," ");
		       $("#tag").text(keywords);
		       
		       function save() {
		     		  $("#commentForm").ajaxSubmit({
		     			    dataType : 'json',
		 	    			success : function(data) {
		 	    				if (data.success) {
		 	    					document.location.reload();		 	    					 
		 	    				} else {
		 	    					layer.msg(data.message, {icon: 5,time: 1000});
		 	    				}
		 					}, //提交后的回调函数	    			
		 	    			error : function(data) {
		 	    				layer.msg("失败，请重新尝试！", {icon: 5,time: 1000});	    				
		 	    			}
		     		  });		 	    	     
			   }
		</script>
	</div>

</body>
</html>